<!DOCTYPE html><html lang="en" dir="ltr"><head>
    <meta charset="UTF-8">

    <!-- Page Title -->
    <title>Braxton - Personal Portfolio &amp; Resume HTML Template</title>

    <!-- Meta Tags -->
    <meta name="description" content="Show yourself brightly with Braxton - unique and creative portfolio and resume template!">
    <meta name="keywords" content="mix_design, resume, portfolio, personal page, cv, template, one page, responsive, html5, css3, creative, clean">
    <meta name="author" content="mix_design">

    <!-- Viewport Meta-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- Template Favicon & Icons Start -->
    <link rel="icon" href="favicon.ico" sizes="any">
    <link rel="icon" href="images/icon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
    <link rel="manifest" href="img/favicon/manifest.webmanifest">
    <!-- Template Favicon & Icons End -->

    <!-- Facebook Metadata Start -->
    <meta property="og:image:height" content="1200">
    <meta property="og:image:width" content="1200">
    <meta property="og:title" content="Braxton - Personal Portfolio &amp; Resume HTML Template">
    <meta property="og:description" content="Show yourself brightly with Braxton - unique and creative portfolio and resume template!">
    <meta property="og:url" content="https://mixdesign.club/themeforest/braxton">
    <meta property="og:image" content="https://mixdesign.club/themeforest/braxton/img/favicon/og-image.jpg">
    <!-- Facebook Metadata End -->

    <!-- Template Styles Start -->
    <link rel="stylesheet" href="css/loader.css">
    <link rel="stylesheet" type="text/css" href="css/plugins.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <!-- Template Styles End -->

    <!-- Custom Browser Color Start -->
    <meta name="theme-color" media="(prefers-color-scheme: light)" content="#dcdce7">
    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#111111">
    <meta name="msapplication-navbutton-color" content="#111111">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <!-- Custom Browser Color End -->
  </head>

  <body>

    <!-- start page -->
    <!-- Loader Start -->
    <div id="loader" class="loader">
      <div id="loaderContent" class="loader__content">
        <div class="loader__shadow"></div>
        <div class="loader__box"></div>
      </div>
    </div>
    <!-- Loader End -->

    <!-- Header Start -->
    <header id="header" class="header d-flex justify-content-between">

      <!-- Navigation Menu Start -->
      <div class="header__navigation">
        <nav id="menu" class="menu">
          <ul class="menu__list d-flex justify-content-start">
            <li class="menu__item">
              <a class="menu__link btn" href="#home">
                <span class="menu__caption">Home</span>
                <i class="ph-bold ph-house-simple"></i>
              </a>
            </li>
            <li class="menu__item">
              <a class="menu__link btn" href="#portfolio">
                <span class="menu__caption">Portfolio</span>
                <i class="ph-bold ph-squares-four"></i>
              </a>
            </li>
            <li class="menu__item">
              <a class="menu__link btn" href="#about">
                <span class="menu__caption">About Me</span>
                <i class="ph-bold ph-user"></i>
              </a>
            </li>
            <li class="menu__item">
              <a class="menu__link btn" href="#resume">
                <span class="menu__caption">Resume</span>
                <i class="ph-bold ph-article"></i>
              </a>
            </li>
            <li class="menu__item">
              <a class="menu__link btn" href="#contact">
                <span class="menu__caption">Contact</span>
                <i class="ph-bold ph-envelope"></i>
              </a>
            </li>
          </ul>
        </nav>
      </div>
      <!-- Navigation Menu End -->

      <!-- Header Controls Start -->
      <div class="header__controls d-flex justify-content-end">
        <button id="color-switcher" class="color-switcher header__switcher btn" type="button" role="switch" aria-label="light/dark mode" aria-checked="true"></button>
        <a id="notify-trigger" class="header__trigger btn" href="mailto:example@example.com?subject=Message%20from%20your%20site">
          <span class="trigger__caption">Let's Talk</span>
          <i class="ph-bold ph-chat-dots"></i>
        </a>
      </div>
      <!-- Header Controls End -->

    </header>
    <!-- Header End -->

    <!-- SVG Background Start -->
    <div id="svgBackground" class="svg-background">
      <!-- top svg item -->
      <div class="background__svg01" data-speed="0.8">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="1000px" height="1000px" viewBox="0 0 1000 1000" style="enable-background:new 0 0 1000 1000;" xml:space="preserve">
          <style type="text/css">
            .bg01{fill:url(index-svg.html#color-gradient);}
          </style>
          <radialGradient id="color-gradient" cx="418.5665" cy="225.9685" r="499.9326" fx="866.8251" fy="4.6162" gradientTransform="matrix(-0.6935 0.7207 -0.7207 -0.6935 953.1126 355.0528)" gradientUnits="userSpaceOnUse">
            <stop offset="0" style="stop-color:#CEC4EF"></stop>
            <stop offset="1" style="stop-color:#CEC4EF;stop-opacity:0"></stop>
          </radialGradient>
          <circle class="bg01" cx="500" cy="500" r="500"></circle>
        </svg>
      </div>
      <!-- bottom svg item -->
      <div class="background__svg02" data-speed="0.4">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="429.6px" height="429.6px" viewBox="0 0 429.6 429.6" style="enable-background:new 0 0 429.6 429.6;" xml:space="preserve">
        <style type="text/css">
          .bg02{fill:url(index-svg.html#color-gradient-2);}
        </style>
        <g id="Layer_1-2">
          <radialGradient id="color-gradient-2" cx="2213.9312" cy="-11537.4219" r="214.85" fx="2393.6191" fy="-11419.6494" gradientTransform="matrix(1.902285e-02 0.9998 0.9998 -1.954636e-02 11706.5303 -2223.4016)" gradientUnits="userSpaceOnUse">
            <stop offset="0" style="stop-color:#CEC4EF"></stop>
            <stop offset="1" style="stop-color:#CEC4EF;stop-opacity:0"></stop>
          </radialGradient>
          <path class="bg02" d="M63,63C146.9-21,282.9-21,366.8,62.9s83.8,219.9-0.1,303.8s-219.9,83.9-303.8,0.1S-20.9,146.9,63,63z"></path>
        </g>
        </svg>
      </div>
    </div>
    <!-- SVG Background End -->

    <!-- Avatar Side Block Start -->
    <div id="avatar" class="avatar">
      <div class="avatar__container d-flex flex-column justify-content-lg-between">
        <!-- image and logo -->
        <div class="avatar__block">
          <div class="avatar__logo d-flex align-items-center">
            <div class="logo__image">
              <!-- Your Logo Here!!! -->
              <!--<img src="img/logo.svg" alt="Braxton - Personal Portfolio & Resume HTML Template Logo">-->
              <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="85px" height="85px" viewBox="0 0 85 85" style="enable-background:new 0 0 85 85;" xml:space="preserve" class="gradient-fill">
                <style type="text/css">
                  .gradient-fill {
                    fill: url(index-svg.html#gradientFill);
                  }
                </style>
                <g>
                  <linearGradient id="gradientFill" gradientUnits="userSpaceOnUse" x1="9.9604" y1="75.0338" x2="75.0387" y2="9.9555">
                    <stop offset="0" style="stop-color:var(--accent)"></stop>
                    <stop offset="1" style="stop-color:var(--secondary)"></stop>
                  </linearGradient>
                  <path class="gradient-fill" d="M51,0H34C15.2,0,0,15.2,0,34v17c0,14.3,8.9,26.6,21.4,31.6c0,0,0,0,0,0l0,0C25.3,84.1,29.5,85,34,85h17
                    c6,0,11.7-1.6,16.6-4.3c0.1-0.1,0.2-0.1,0.3-0.2C78.1,74.6,85,63.6,85,51V34C85,15.2,69.8,0,51,0z M83,51c0,10.7-5.3,20.2-13.4,26
                    v-2.5v-3.9h3.9v-3.9h-3.9v-3.9h3.9v-3.9h-3.9H67v-3.9V51h-3.9v3.9v3.9h2.6v3.9v3.9v3.9h-3.9h-3.9v3.9h3.9h3.9v3.9v1
                    C61.3,81.7,56.3,83,51,83H34c-4.5,0-8.7-0.9-12.6-2.6v-2v-3.9h3.9h3.9v-3.9h-3.9h-3.9v-3.9v-3.9v-3.9H24v-3.9V51h-3.9v3.9v3.9h-2.6
                    h-3.9v3.9h3.9v3.9h-3.9v3.9h3.9v3.9v3.9C8.2,72.8,2,62.6,2,51V34C2,16.4,16.4,2,34,2h17c17.6,0,32,14.4,32,32V51z M50.1,54.9H54
                    v3.9v3.9h-3.9v-3.9V54.9z M33.1,54.9H37v3.9v3.9h-3.9v-3.9V54.9z M27.9,51H24v-3.9v-3.9v-3.9h3.9v3.9v3.9V51z M31.8,39.3h-3.9v-3.9
                    h3.9V39.3z M31.8,43.2v-3.9h3.9v3.9H31.8z M63.1,47.1V51h-3.9v-3.9v-3.9v-3.9h3.9v3.9V47.1z M35.7,47.1v-3.9h3.9h3.9h3.9h3.9v3.9
                    h-3.9h-3.9h-3.9H35.7z M59.2,39.3h-3.9v-3.9h3.9V39.3z M55.3,43.2h-3.9v-3.9h3.9V43.2z"></path>
                </g>
              </svg>
            </div>
            <div class="logo__caption">
              <p>Alex<br>Walker</p>
            </div>
          </div>
          <div class="avatar__image">
            <img src="images/1024x1024_a01.webp" alt="Braxton - Personal Portfolio &amp; Resume HTML Template Avatar">
          </div>
        </div>
        <!-- data caption #1 -->
        <div class="avatar__block">
          <h6>
            <small class="top">Specialization:</small>
            UI/UX designer<br>and frontend developer
          </h6>
        </div>
        <!-- data caption #2 -->
        <div class="avatar__block">
          <h6>
            <small class="top">Based in:</small>
            Odesa, Ukraine
          </h6>
        </div>
        <!-- socials and CTA button -->
        <div class="avatar__block">
          <div class="avatar__socials">
            <ul class="socials-square d-flex justify-content-between">
              <li class="socials-square__item">
                <a class="socials-square__link btn" href="https://dribbble.com/" target="_blank"><i class="ph-bold ph-dribbble-logo"></i></a>
              </li>
              <li class="socials-square__item">
                <a class="socials-square__link btn" href="https://www.behance.net/" target="_blank"><i class="ph-bold ph-behance-logo"></i></a>
              </li>
              <li class="socials-square__item">
                <a class="socials-square__link btn" href="https://www.instagram.com/" target="_blank"><i class="ph-bold ph-instagram-logo"></i></a>
              </li>
              <li class="socials-square__item">
                <a class="socials-square__link btn" href="https://www.twitch.tv/" target="_blank"><i class="ph-bold ph-twitch-logo"></i></a>
              </li>
              <li class="socials-square__item">
                <a class="socials-square__link btn" href="https://www.pinterest.com/" target="_blank"><i class="ph-bold ph-pinterest-logo"></i></a>
              </li>
            </ul>
          </div>
          <div class="avatar__btnholder">
            <a class="btn btn-default btn-fullwidth btn-hover btn-hover-accent" href="#contact" target="_blank">
              <span class="btn-caption">Let's Work Together!</span>
            </a>
          </div>
        </div>
      </div>
    </div>
    <!-- Avatar Side Block End -->

    <!-- Page Content Start -->
    <div id="content" class="content">
      <div class="content__wrapper">

        <!-- Intro Section Start -->
        <section id="home" class="main intro">

          <!-- Headline Start -->
          <div id="headline" class="headline d-flex align-items-start flex-column">
            <p class="headline__subtitle animate-headline">
              <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="13px" height="13px" viewBox="0 0 13 13" fill="currentColor">
                <path fill="currentColor" d="M5.6,12.6c-0.5-0.8-0.7-2.4-1.7-3.5c-1-1-2.7-1.2-3.5-1.7C-0.1,7-0.1,6,0.4,5.6c0.8-0.5,2.3-0.6,3.5-1.8
                  C5,2.8,5.1,1.2,5.6,0.4C6-0.1,7-0.1,7.4,0.4c0.5,0.8,0.7,2.4,1.8,3.5c1.2,1.2,2.6,1.2,3.5,1.7c0.6,0.4,0.6,1.4,0,1.7
                  C11.8,7.9,10.2,8,9.1,9.1c-1,1-1.2,2.7-1.7,3.5C7,13.1,6,13.1,5.6,12.6z"></path>
              </svg>
              <span>Let's meet!</span>
            </p>
            <h1 class="headline__title animate-headline">I'm Alex Walker<br>Digital designer and illustrator.</h1>
            <div class="headline__btnholder d-flex flex-column flex-sm-row">
              <a class="btn mobile-vertical btn-default btn-hover btn-hover-accent-mobile animate-headline" href="#portfolio">
                <span class="btn-caption">My Works</span>
                <i class="ph-bold ph-squares-four"></i>
              </a>
              <a class="btn mobile-vertical btn-default btn-hover btn-hover-outline-mobile animate-headline" href="#0">
                <span class="btn-caption">Download CV</span>
                <i class="ph-bold ph-download-simple"></i>
              </a>
            </div>
          </div>
          <!-- Headline End -->

          <!-- Scroll Button Start -->
          <div class="rotating-btn">
            <a href="#portfolio" class="rotating-btn__link slide-down">
              <!-- SVG rotating text -->
              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 120 120" style="enable-background:new 0 0 120 120;" xml:space="preserve" class="animate-rotation" data-value="360">
                <defs>
                  <path id="textPath" d="M110,59.5c0,27.6-22.4,50-50,50s-50-22.4-50-50s22.4-50,50-50S110,31.9,110,59.5z"></path>
                </defs>
                <g>
                  <use xlink:href="#textPath" fill="none"></use>
                  <text>
                    <!-- button text here!!! -->
                    <textPath xlink:href="#textPath">Scroll for More * Scroll for More * </textPath>
                  </text>
                </g>
              </svg>
              <!-- arrow icon -->
              <i class="ph-bold ph-arrow-down"></i>
            </a>
          </div>
          <!-- Scroll Button End -->

        </section>
        <!-- Intro Section End -->

        <!-- Portfolio Section Start -->
        <section id="portfolio" class="inner inner-first portfolio">

          <!-- Content Block - H2 Section Title Start -->
          <div class="content__block section-grid-title">
            <p class="h2__subtitle animate-in-up">
              <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="13px" height="13px" viewBox="0 0 13 13" fill="currentColor">
                <path fill="currentColor" d="M5.6,12.6c-0.5-0.8-0.7-2.4-1.7-3.5c-1-1-2.7-1.2-3.5-1.7C-0.1,7-0.1,6,0.4,5.6c0.8-0.5,2.3-0.6,3.5-1.8
                  C5,2.8,5.1,1.2,5.6,0.4C6-0.1,7-0.1,7.4,0.4c0.5,0.8,0.7,2.4,1.8,3.5c1.2,1.2,2.6,1.2,3.5,1.7c0.6,0.4,0.6,1.4,0,1.7
                  C11.8,7.9,10.2,8,9.1,9.1c-1,1-1.2,2.7-1.7,3.5C7,13.1,6,13.1,5.6,12.6z"></path>
              </svg>
              <span>Portfolio</span>
            </p>
            <h2 class="h2__title animate-in-up">Check out my featured projects</h2>
          </div>
          <!-- Content Block - H2 Section Title End -->

          <!-- Content Block - Works Gallery Start -->
          <div class="content__block grid-block">
            <div class="container-fluid px-0 inner__gallery">
              <div class="row gx-0 my-gallery" itemscope="" itemtype="http://schema.org/ImageGallery">
    
                <!-- Works Gallery Single Item Start -->
                <figure class="col-12 col-md-6 gallery__item grid-item animate-card-2" itemprop="associatedMedia" itemscope="" itemtype="http://schema.org/ImageObject">
                  <a href="img/works/1400x1400_w01.webp" data-image="img/works/1400x1400_w01.webp" class="gallery__link" itemprop="contentUrl" data-size="1400x1400">
                    <img src="images/800_w01-thumb.webp" class="gallery__image" itemprop="thumbnail" alt="Image description">
                  </a>
                  <figcaption class="gallery__descr" itemprop="caption description">
                    <h5>Isometric House</h5>
                    <div class="card__tags d-flex flex-wrap">
                      <span class="rounded-tag opposite">Illustrations</span>
                      <span class="rounded-tag opposite">3D Render</span>
                    </div>
                    <p class="small">Mauris porttitor lobortis ligula, quis molestie lorem scelerisque eu. Morbi aliquam enim odio.
                    </p>
                  </figcaption>
                </figure>
                <!-- Works Gallery Single Item End -->
    
                <!-- Works Gallery Single Item Start -->
                <figure class="col-12 col-md-6 gallery__item grid-item animate-card-2" itemprop="associatedMedia" itemscope="" itemtype="http://schema.org/ImageObject">
                  <a href="img/works/1400x1400_w02.webp" data-image="img/works/800_w02-thumb.webp" class="gallery__link" itemprop="contentUrl" data-size="1400x1400">
                    <img src="images/800_w02-thumb.webp" class="gallery__image" itemprop="thumbnail" alt="Image description">
                  </a>
                  <figcaption class="gallery__descr opposite" itemprop="caption description">
                    <h5 class="opposite">Dashboard Template</h5>
                    <div class="card__tags d-flex flex-wrap">
                      <span class="rounded-tag">UI Design</span>
                      <span class="rounded-tag">Figma</span>
                    </div>
                    <p class="small">Mauris porttitor lobortis ligula, quis molestie lorem scelerisque eu. Morbi aliquam enim odio,
                      a mollis ipsum tristique eu.
                    </p>
                  </figcaption>
                </figure>
                <!-- Works Gallery Single Item End -->
    
                <!-- Works Gallery Single Item Start -->
                <figure class="col-12 col-md-6 gallery__item grid-item animate-card-2" itemprop="associatedMedia" itemscope="" itemtype="http://schema.org/ImageObject">
                  <a href="img/works/1400x1400_w03.webp" data-image="img/works/800_w03-thumb.webp" class="gallery__link" itemprop="contentUrl" data-size="1400x1400">
                    <img src="images/800_w03-thumb.webp" class="gallery__image" itemprop="thumbnail" alt="Image description">
                  </a>
                  <figcaption class="gallery__descr opposite" itemprop="caption description">
                    <h5 class="opposite">Notification Icon</h5>
                    <div class="card__tags d-flex flex-wrap">
                      <span class="rounded-tag">Illustrations</span>
                      <span class="rounded-tag">3D Render</span>
                    </div>
                    <p class="small">Mauris porttitor lobortis ligula, quis molestie lorem scelerisque eu. Morbi aliquam enim odio,
                      a mollis ipsum tristique eu.
                    </p>
                  </figcaption>
                </figure>
                <!-- Works Gallery Single Item End -->
    
                <!-- Works Gallery Single Item Start -->
                <figure class="col-12 col-md-6 gallery__item grid-item animate-card-2" itemprop="associatedMedia" itemscope="" itemtype="http://schema.org/ImageObject">
                  <a href="img/works/1400x1400_w04.webp" data-image="img/works/800_w04-thumb.webp" class="gallery__link" itemprop="contentUrl" data-size="1400x1400">
                    <img src="images/800_w04-thumb.webp" class="gallery__image" itemprop="thumbnail" alt="Image description">
                  </a>
                  <figcaption class="gallery__descr " itemprop="caption description">
                    <h5>Smart Penguin</h5>
                    <div class="card__tags d-flex flex-wrap">
                      <span class="rounded-tag opposite">Illustrations</span>
                      <span class="rounded-tag opposite">AI Experiment</span>
                    </div>
                    <p class="small">Mauris porttitor lobortis ligula, quis molestie lorem scelerisque eu. Morbi aliquam enim odio,
                      a mollis ipsum tristique eu.
                    </p>
                  </figcaption>
                </figure>
                <!-- Works Gallery Single Item End -->
    
              </div>
            </div>
          </div>
          <!-- Content Block - Works Gallery End -->

        </section>
        <!-- Portfolio Section End -->

        <!-- About Section Start -->
        <section id="about" class="inner about">

          <!-- Content Block - H2 Section Title Start -->
          <div class="content__block section-grid-title">
            <p class="h2__subtitle animate-in-up">
              <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="13px" height="13px" viewBox="0 0 13 13" fill="currentColor">
                <path fill="currentColor" d="M5.6,12.6c-0.5-0.8-0.7-2.4-1.7-3.5c-1-1-2.7-1.2-3.5-1.7C-0.1,7-0.1,6,0.4,5.6c0.8-0.5,2.3-0.6,3.5-1.8
                  C5,2.8,5.1,1.2,5.6,0.4C6-0.1,7-0.1,7.4,0.4c0.5,0.8,0.7,2.4,1.8,3.5c1.2,1.2,2.6,1.2,3.5,1.7c0.6,0.4,0.6,1.4,0,1.7
                  C11.8,7.9,10.2,8,9.1,9.1c-1,1-1.2,2.7-1.7,3.5C7,13.1,6,13.1,5.6,12.6z"></path>
              </svg>
              <span>About Me</span>
            </p>
            <h2 class="h2__title animate-in-up">Turning complex problems into simple design</h2>
          </div>
          <!-- Content Block - H2 Section Title End -->

          <!-- Content Block - Achievements Start -->
          <div class="content__block grid-block">
            <div class="achievements d-flex flex-column flex-md-row align-items-md-stretch">
              <!-- achievements single item -->
              <div class="achievements__item d-flex flex-column grid-item animate-card-3">
                <div class="achievements__card">
                  <p class="achievements__number">40+</p>
                  <p class="achievements__descr">Happy clients</p>
                </div>
              </div>
              <!-- achievements single item -->
              <div class="achievements__item d-flex flex-column grid-item animate-card-3">
                <div class="achievements__card">
                  <p class="achievements__number">2+</p>
                  <p class="achievements__descr">Years of experience</p>
                </div>
              </div>
              <!-- achievements single item -->
              <div class="achievements__item d-flex flex-column grid-item animate-card-3">
                <div class="achievements__card">
                  <p class="achievements__number">50+</p>
                  <p class="achievements__descr">Projects done</p>
                </div>
              </div>
            </div>
          </div>
          <!-- Content Block - Achievements End -->

          <!-- Content Block - About Me Data Start -->
          <div class="content__block grid-block block-large">
            <div class="container-fluid p-0">
              <div class="row g-0 justify-content-between">
                
                <!-- About Me Description Start -->
                <div class="col-12 col-xl-8 grid-item about-descr">
                  <p class="about-descr__text animate-in-up">
                    I wonder if I've been changed in the night? Let me think. Was I the same when I got up this morning? 
                    I almost think I can remember feeling a little different. 
                    But if I'm not the same, the 
                    <a href="#0" class="text-link">next question</a> 
                    is 'Who in the world am I?' Ah, that's the great puzzle!
                  </p>
                  <p class="about-descr__text animate-in-up">
                    Be what you would seem to be - or, if you'd like it put more simply - never imagine yourself not to be otherwise 
                    than what it might appear to others that what you were or 
                    <a href="#0" class="text-link">might have been</a> 
                    was not otherwise than what you had been 
                    would have appeared to them to be otherwise.
                  </p>
                  <div class="btn-group about-descr__btnholder animate-in-up">
                    <a class="btn mobile-vertical btn-default btn-hover btn-hover-accent" href="#0">
                      <span class="btn-caption">Download CV</span>
                      <i class="ph-bold ph-download-simple"></i>
                    </a>
                  </div>
                </div>
                <!-- About Me Description End -->
      
                <!-- About Me Information Start -->
                <div class="col-12 col-xl-4 grid-item about-info">
                  <div class="about-info__item animate-in-up">
                    <h6>
                      <small class="top">Name</small>
                      Alex Walker
                    </h6>
                  </div>
                  <div class="about-info__item animate-in-up">
                    <h6>
                      <small class="top">Phone</small>
                      <a class="text-link-bold" href="tel:+12127089400">+1 212-708-9400</a>
                    </h6>
                  </div>
                  <div class="about-info__item animate-in-up">
                    <h6>
                      <small class="top">Email</small>
                      <a class="text-link-bold" href="mailto:example@example.com?subject=Message%20from%20your%20site">hello@yourdomain.com</a>
                    </h6>
                  </div>
                  <div class="about-info__item animate-in-up">
                    <h6>
                      <small class="top">Location</small>
                      <a class="text-link-bold" href="https://maps.app.goo.gl/xMJXTEUeHkv6kYRQ6" target="_blank">Odesa, Ukraine</a>
                    </h6>
                  </div>
                </div>
                <!-- About Me Information End -->
      
              </div>
            </div>
          </div>
          <!-- Content Block - About Me Data End -->

          <!-- Content Block - Services Start -->
          <div class="content__block grid-block">
            <div class="container-fluid p-0">
              <div class="row g-0 align-items-stretch cards">
                <!-- services cards grid single item -->
                <div class="col-12 col-md-6 cards__item grid-item animate-card-2">
                  <div class="cards__card d-flex flex-column">
                    <div class="cards__descr">
                      <h4 class="cards__title animate-in-up">Frontend<br>development</h4>
                      <div class="cards__tags d-flex flex-wrap animate-in-up">
                        <span class="rounded-tag tag-outline">UI/UX Design</span>
                        <span class="rounded-tag tag-outline">Design to Code</span>
                      </div>
                      <p class="small cards__text animate-in-up">I work with HTML/CSS, Framer and WordPress.</p>
                    </div>
                    <div class="cards__image d-flex animate-in-up">
                      <img src="images/1200x900_s01.webp" alt="Service/Feature Image">
                    </div>
                  </div>
                </div>
                <!-- services grid cards single item -->
                <div class="col-12 col-md-6 cards__item grid-item animate-card-2">
                  <div class="cards__card d-flex flex-column">
                    <div class="cards__descr">
                      <h4 class="cards__title animate-in-up">Digital art and graphic design</h4>
                      <div class="cards__tags d-flex flex-wrap animate-in-up">
                        <span class="rounded-tag tag-outline">Illustrations</span>
                        <span class="rounded-tag tag-outline">AI Experiments</span>
                      </div>
                      <p class="small cards__text animate-in-up">I use Adobe Photoshop, Fresco and Blender to create 
                        illustrations and 3D renders for my clients and stocks.
                      </p>
                    </div>
                    <div class="cards__image d-flex animate-in-up">
                      <img src="images/1200x900_s02.webp" alt="Service/Feature Image">
                    </div>
                  </div>
                </div>
                <!-- services grid cards single item -->
                <div class="col-12 col-md-6 cards__item grid-item animate-card-2">
                  <div class="cards__card d-flex flex-column">
                    <div class="cards__descr">
                      <h4 class="cards__title animate-in-up">SEO/Digital marketing solutions</h4>
                      <div class="cards__tags d-flex flex-wrap animate-in-up">
                        <span class="rounded-tag tag-outline">Social Media</span>
                        <span class="rounded-tag tag-outline">Analytics</span>
                      </div>
                      <p class="small cards__text animate-in-up">Social media content plans, media monitoring, email and text messaging
                        and search engine optimization.
                      </p>
                    </div>
                    <div class="cards__image d-flex">
                      <img src="images/1200x900_s03.webp" alt="Service/Feature Image">
                    </div>
                  </div>
                </div>
                <!-- services grid cards single item -->
                <div class="col-12 col-md-6 cards__item grid-item animate-card-2">
                  <div class="cards__card d-flex flex-column">
                    <div class="cards__descr">
                      <h4 class="cards__title animate-in-up">Brand<br>identity</h4>
                      <div class="cards__tags d-flex flex-wrap animate-in-up">
                        <span class="rounded-tag tag-outline">Logo Design</span>
                        <span class="rounded-tag tag-outline">Style Guides</span>
                      </div>
                      <p class="small cards__text animate-in-up">I help my clients to develop a personality and brand voice, 
                        design the brand look and logo.
                      </p>
                    </div>
                    <div class="cards__image d-flex animate-in-up">
                      <img src="images/1200x900_s04.webp" alt="Service/Feature Image">
                    </div>
                  </div>
                </div>
    
              </div>
            </div>
          </div>
          <!-- Content Block - Services End -->

        </section>
        <!-- About Section End -->

        <!-- Resume Section Start -->
        <section id="resume" class="inner resume">

          <!-- Content Block - H2 Section Title Start -->
          <div class="content__block block-large">
            <p class="h2__subtitle animate-in-up">
              <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="13px" height="13px" viewBox="0 0 13 13" fill="currentColor">
                <path fill="currentColor" d="M5.6,12.6c-0.5-0.8-0.7-2.4-1.7-3.5c-1-1-2.7-1.2-3.5-1.7C-0.1,7-0.1,6,0.4,5.6c0.8-0.5,2.3-0.6,3.5-1.8
                  C5,2.8,5.1,1.2,5.6,0.4C6-0.1,7-0.1,7.4,0.4c0.5,0.8,0.7,2.4,1.8,3.5c1.2,1.2,2.6,1.2,3.5,1.7c0.6,0.4,0.6,1.4,0,1.7
                  C11.8,7.9,10.2,8,9.1,9.1c-1,1-1.2,2.7-1.7,3.5C7,13.1,6,13.1,5.6,12.6z"></path>
              </svg>
              <span>Resume</span>
            </p>
            <h2 class="h2__title animate-in-up">Education and practical experience</h2>
            <p class="h2__text animate-in-up">
              Be what you would seem to be - or, if you'd like it put more simply - never imagine yourself not to be otherwise 
              than what it might appear to others that what you were or 
              <a href="#0" class="text-link">might have been</a> 
              was not otherwise than what you had been 
              would have appeared to them to be otherwise.
            </p>
          </div>
          <!-- Content Block - H2 Section Title End -->

          <!-- Content Block - Education Start -->
          <div class="content__block block-large">

            <!-- H3 Block Start -->
            <div class="section-h3">
              <h3 class="h3__title animate-in-up">My education</h3>
            </div>
            <!-- H3 Block End -->

            <!-- Education Lines Start -->
            <div class="container-fluid p-0 resume-lines">
              <!-- education single item -->
              <div class="row g-0 resume-lines__item animate-in-up">
                <div class="col-12 col-md-2">
                  <span class="resume-lines__date animate-in-up">2015 - 2016</span>
                </div>
                <div class="col-12 col-md-5">
                  <h5 class="resume-lines__title animate-in-up">Drawing Concentration</h5>
                  <p class="resume-lines__source animate-in-up">Course by
                    <a href="#0" class="text-link-bold" target="_blank">New York Academy of Art</a>
                  </p>
                </div>
                <div class="col-12 col-md-5">
                  <p class="small resume-lines__descr animate-in-up">Intensive drawing courses that present the fundamental principles of drawing.</p>
                </div>
              </div>
              <!-- education single item -->
              <div class="row g-0 resume-lines__item animate-in-up">
                <div class="col-12 col-md-2">
                  <span class="resume-lines__date animate-in-up">2019 - 2021</span>
                </div>
                <div class="col-12 col-md-5">
                  <h5 class="resume-lines__title animate-in-up">UI/UX Design Specialization</h5>
                  <p class="resume-lines__source animate-in-up">Course by 
                    <a href="#0" class="text-link-bold" target="_blank">California Institute of Arts</a>
                  </p>
                </div>
                <div class="col-12 col-md-5">
                  <p class="small resume-lines__descr animate-in-up">Research, design, and prototype effective, visually-driven websites and apps.</p>
                </div>
              </div>
              <!-- education single item -->
              <div class="row g-0 resume-lines__item animate-in-up">
                <div class="col-12 col-md-2">
                  <span class="resume-lines__date animate-in-up">2022</span>
                </div>
                <div class="col-12 col-md-5">
                  <h5 class="resume-lines__title animate-in-up">UI/UX Designer</h5>
                  <p class="resume-lines__source animate-in-up"> Course by
                    <a href="#0" class="text-link-bold" target="_blank">Coursera</a>
                  </p>
                </div>
                <div class="col-12 col-md-5">
                  <p class="small resume-lines__descr animate-in-up">This cource is about how to complete the design process from beginning to end.</p>
                </div>
              </div>
            </div>
            <!-- Education Lines End -->

          </div>
          <!-- Content Block - Education End -->

          <!-- Content Block - Experience Start -->
          <div class="content__block block-large">

            <!-- H3 Block Start -->
            <div class="section-h3">
              <h3 class="h3__title animate-in-up">Work experience</h3>
            </div>
            <!-- H3 Block End -->

            <!-- Experience Lines Start -->
            <div class="container-fluid p-0 resume-lines">
              <!-- experience single item -->
              <div class="row g-0 resume-lines__item animate-in-up">
                <div class="col-12 col-md-2">
                  <span class="resume-lines__date animate-in-up">2018 - 2019</span>
                </div>
                <div class="col-12 col-md-5">
                  <h5 class="resume-lines__title animate-in-up">Illustrator</h5>
                  <p class="resume-lines__source animate-in-up">in the 
                    <a href="#0" class="text-link-bold" target="_blank">Creative Mind</a>
                    agency
                  </p>
                </div>
                <div class="col-12 col-md-5">
                  <p class="small resume-lines__descr animate-in-up">I created original images for a range of digital and printed products.</p>
                </div>
              </div>
              <!-- experience single item -->
              <div class="row g-0 resume-lines__item animate-in-up">
                <div class="col-12 col-md-2">
                  <span class="resume-lines__date animate-in-up">2019 - 2021</span>
                </div>
                <div class="col-12 col-md-5">
                  <h5 class="resume-lines__title animate-in-up">Graphic Designer</h5>
                  <p class="resume-lines__source animate-in-up">in the
                    <a href="#0" class="text-link-bold" target="_blank">Moon Light</a>
                    agency
                  </p>
                </div>
                <div class="col-12 col-md-5">
                  <p class="small resume-lines__descr animate-in-up">My job was to create adverts, branding, signage and other media products.</p>
                </div>
              </div>
              <!-- experience single item -->
              <div class="row g-0 resume-lines__item animate-in-up">
                <div class="col-12 col-md-2">
                  <span class="resume-lines__date animate-in-up">2021 - now</span>
                </div>
                <div class="col-12 col-md-5">
                  <h5 class="resume-lines__title animate-in-up">UI/UX Designer</h5>
                  <p class="resume-lines__source animate-in-up">in the
                    <a href="#0" class="text-link-bold" target="_blank">Moon Light</a>
                    agency
                  </p>
                </div>
                <div class="col-12 col-md-5">
                  <p class="small resume-lines__descr animate-in-up">I am actively involved in creating user interfaces for mobile apps and websites.</p>
                </div>
              </div>
            </div>
            <!-- Experience Lines End -->

          </div>
          <!-- Content Block - Experience End -->

          <!-- Content Block - H3 Block Start -->
          <div class="content__block">
            <div class="section-h3 section-h3-grid">
              <h3 class="h3__title animate-in-up">My favourite tools</h3>
            </div>
          </div>
          <!-- Content Block - H3 Block End -->

          <!-- Content Block - Tools List Start -->
          <div class="content__block grid-block block-large">
            <!-- Tools List Start -->
            <div class="tools-cards d-flex justify-content-start flex-wrap">
              <!-- tools simgle item -->
              <div class="tools-cards__item d-flex grid-item-s animate-card-5">
                <div class="tools-cards__card">
                  <img class="tools-cards__icon animate-in-up" src="images/icon-photoshop.svg" alt="Tools Icon">
                  <h6 class="tools-cards__caption animate-in-up">Photoshop</h6>
                </div>
              </div>
              <!-- tools simgle item -->
              <div class="tools-cards__item d-flex grid-item-s animate-card-5">
                <div class="tools-cards__card">
                  <img class="tools-cards__icon animate-in-up" src="images/icon-figma.svg" alt="Tools Icon">
                  <h6 class="tools-cards__caption animate-in-up">Figma</h6>
                </div>
              </div>
              <!-- tools simgle item -->
              <div class="tools-cards__item d-flex grid-item-s animate-card-5">
                <div class="tools-cards__card">
                  <img class="tools-cards__icon animate-in-up" src="images/icon-illustrator.svg" alt="Tools Icon">
                  <h6 class="tools-cards__caption animate-in-up">Illustrator</h6>
                </div>
              </div>
              <!-- tools simgle item -->
              <div class="tools-cards__item d-flex grid-item-s animate-card-5">
                <div class="tools-cards__card">
                  <img class="tools-cards__icon animate-in-up" src="images/icon-scketch.svg" alt="Tools Icon">
                  <h6 class="tools-cards__caption animate-in-up">Sketch</h6>
                </div>
              </div>
              <!-- tools simgle item -->
              <div class="tools-cards__item d-flex grid-item-s animate-card-5">
                <div class="tools-cards__card">
                  <img class="tools-cards__icon animate-in-up" src="images/icon-blender.svg" alt="Tools Icon">
                  <h6 class="tools-cards__caption animate-in-up">Blender</h6>
                </div>
              </div>
              <!-- tools simgle item -->
              <div class="tools-cards__item d-flex grid-item-s animate-card-5">
                <div class="tools-cards__card">
                  <img class="tools-cards__icon animate-in-up" src="images/icon-html.svg" alt="Tools Icon">
                  <h6 class="tools-cards__caption animate-in-up">HTML5</h6>
                </div>
              </div>
              <!-- tools simgle item -->
              <div class="tools-cards__item d-flex grid-item-s animate-card-5">
                <div class="tools-cards__card">
                  <img class="tools-cards__icon animate-in-up" src="images/icon-css.svg" alt="Tools Icon">
                  <h6 class="tools-cards__caption animate-in-up">CSS3</h6>
                </div>
              </div>
              <!-- tools simgle item -->
              <div class="tools-cards__item d-flex grid-item-s animate-card-5">
                <div class="tools-cards__card">
                  <img class="tools-cards__icon animate-in-up" src="images/icon-notion.svg" alt="Tools Icon">
                  <h6 class="tools-cards__caption animate-in-up">Notion</h6>
                </div>
              </div>
            </div>
            <!-- Tools List End -->
          </div>
          <!-- Content Block - Tools List End -->

          <!-- Content Block - H2 Block Start -->
          <div class="content__block section-title">
            <p class="h2__subtitle animate-in-up">
              <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="13px" height="13px" viewBox="0 0 13 13" fill="currentColor">
                <path fill="currentColor" d="M5.6,12.6c-0.5-0.8-0.7-2.4-1.7-3.5c-1-1-2.7-1.2-3.5-1.7C-0.1,7-0.1,6,0.4,5.6c0.8-0.5,2.3-0.6,3.5-1.8
                  C5,2.8,5.1,1.2,5.6,0.4C6-0.1,7-0.1,7.4,0.4c0.5,0.8,0.7,2.4,1.8,3.5c1.2,1.2,2.6,1.2,3.5,1.7c0.6,0.4,0.6,1.4,0,1.7
                  C11.8,7.9,10.2,8,9.1,9.1c-1,1-1.2,2.7-1.7,3.5C7,13.1,6,13.1,5.6,12.6z"></path>
              </svg>
              <span>Testimonials</span>
            </p>
            <h2 class="h2__title animate-in-up">Clients say about me</h2>
          </div>
          <!-- Content Block - H2 Block End -->

          <!-- Content Block - Testimonials Slider Start -->
          <div class="content__block">

            <!-- Testimonials Slider Start -->
            <div class="testimonials-slider">
              <!-- slider main container -->
              <div class="swiper-testimonials">
                <!-- additional required wrapper -->
                <div class="swiper-wrapper">
                  <!-- slides -->
                  <div class="swiper-slide">
                    <div class="testimonials-card animate-in-up">
                      <div class="testimonials-card__tauthor d-flex animate-in-up">
                        <div class="tauthor__avatar">
                          <img src="images/400x400_t01.webp" alt="Review Author">
                        </div>
                        <div class="tauthor__info d-flex flex-column justify-content-center">
                          <p class="tauthor__name">Alex Tomato</p>
                          <p class="tauthor__position">Brand Manager in 
                            <a href="#0" class="text-link-bold" target="_blank">Instant Design</a>
                          </p>
                          <div class="tauthor__rating d-flex">
                            <i class="ph-fill ph-star"></i>
                            <i class="ph-fill ph-star"></i>
                            <i class="ph-fill ph-star"></i>
                            <i class="ph-fill ph-star"></i>
                            <i class="ph-fill ph-star"></i>
                          </div>
                        </div>
                      </div>
                      <div class="testimonials-card__descr animate-in-up">
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut 
                          laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud. Dolore magna aliquam.</p>
                      </div>
                      <div class="testimonials-card__btnholder animate-in-up">
                        <a class="btn mobile-vertical btn-line btn-transparent slide-right" href="#0">
                          <span class="btn-caption">Project Page</span>
                          <i class="ph-bold ph-arrow-right"></i>
                        </a>
                      </div>
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="testimonials-card  animate-in-up">
                      <div class="testimonials-card__tauthor d-flex  animate-in-up">
                        <div class="tauthor__avatar">
                          <img src="images/400x400_t02.webp" alt="Review Author">
                        </div>
                        <div class="tauthor__info d-flex flex-column justify-content-center">
                          <p class="tauthor__name">Jenny Pineapple</p>
                          <p class="tauthor__position">SEO in 
                            <a href="#0" class="text-link-bold" target="_blank">Creative People</a>
                          </p>
                          <div class="tauthor__rating d-flex">
                            <i class="ph-fill ph-star"></i>
                            <i class="ph-fill ph-star"></i>
                            <i class="ph-fill ph-star"></i>
                            <i class="ph-fill ph-star"></i>
                            <i class="ph-fill ph-star"></i>
                          </div>
                        </div>
                      </div>
                      <div class="testimonials-card__descr animate-in-up">
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut 
                          laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud. Dolore magna aliquam.</p>
                      </div>
                      <div class="testimonials-card__btnholder animate-in-up">
                        <a class="btn mobile-vertical btn-line btn-transparent slide-right" href="#0">
                          <span class="btn-caption">Project Page</span>
                          <i class="ph-bold ph-arrow-right"></i>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- navigation buttons -->
                <div class="swiper-button-prev mxd-slider-btn-square mxd-slider-btn-square-prev animate-in-up">
                  <a class="btn btn-square btn-square-s btn-outline slide-left" href="#0">
                    <i class="ph-bold ph-caret-left"></i>
                  </a>
                </div>
                <div class="swiper-button-next mxd-slider-btn-square mxd-slider-btn-square-next animate-in-up">
                  <a class="btn btn-square btn-square-s btn-outline slide-right" href="#0">
                    <i class="ph-bold ph-caret-right"></i>
                  </a>
                </div>
              </div>
            </div>
            <!-- Testimonials Slider End -->

          </div>
          <!-- Content Block - Testimonials Slider End -->

        </section>
        <!-- Resume Section End -->

        <!-- Contact Section Start -->
        <section id="contact" class="inner contact">

          <!-- Content Block - H2 Section Title Start -->
          <div class="content__block section-title">
            <p class="h2__subtitle  animate-in-up">
              <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="13px" height="13px" viewBox="0 0 13 13" fill="currentColor">
                <path fill="currentColor" d="M5.6,12.6c-0.5-0.8-0.7-2.4-1.7-3.5c-1-1-2.7-1.2-3.5-1.7C-0.1,7-0.1,6,0.4,5.6c0.8-0.5,2.3-0.6,3.5-1.8
                  C5,2.8,5.1,1.2,5.6,0.4C6-0.1,7-0.1,7.4,0.4c0.5,0.8,0.7,2.4,1.8,3.5c1.2,1.2,2.6,1.2,3.5,1.7c0.6,0.4,0.6,1.4,0,1.7
                  C11.8,7.9,10.2,8,9.1,9.1c-1,1-1.2,2.7-1.7,3.5C7,13.1,6,13.1,5.6,12.6z"></path>
              </svg>
              <span>Contact</span>
            </p>
            <h2 class="h2__title  animate-in-up">Let's make something awesome together!</h2>
          </div>
          <!-- Content Block - H2 Section Title End -->

          <!-- Content Block - Contact Form Start -->
          <div class="content__block grid-block block-grid-large">
            <div class="form-container">

              <!-- Reply Messages Start -->
              <div class="form__reply centered text-center">
                <i class="ph-bold ph-smiley reply__icon"></i>
                <p class="reply__title">Done!</p>
                <span class="reply__text">Thanks for your message. I'll get back as soon as possible.</span>
              </div> 
              <!-- Reply Messages End -->

              <!-- Contact Form Start -->
              <form class="form contact-form" id="contact-form">
                <!-- Hidden Required Fields -->
                <input type="hidden" name="project_name" value="Starter Template">
                <input type="hidden" name="admin_email" value="support@mixdesign.club">
                <input type="hidden" name="form_subject" value="Contact Form Message">
                <!-- END Hidden Required Fields-->
                <div class="container-fluid p-0">
                  <div class="row gx-0">
                    <div class="col-12 col-md-6 form__item animate-in-up">
                      <input type="text" name="Name" placeholder="Your Name*" required="">
                    </div>
                    <div class="col-12 col-md-6 form__item animate-in-up">
                      <input type="text" name="Company" placeholder="Company Name">
                    </div>
                    <div class="col-12 col-md-6 form__item animate-in-up">
                      <input type="email" name="E-mail" placeholder="Email Adress*" required="">
                    </div>
                    <div class="col-12 col-md-6 form__item animate-in-up">
                      <input type="tel" name="Phone" placeholder="Phone Number*" required="">
                    </div>
                    <div class="col-12 form__item animate-in-up">
                      <textarea name="Message" placeholder="A Few Words*" required=""></textarea>
                    </div>
                    <div class="col-12 form__item animate-in-up">
                      <button class="btn btn-default btn-hover btn-hover-accent" type="submit">
                        <span class="btn-caption">Send Message</span>
                        <i class="ph-bold ph-paper-plane-tilt"></i>
                      </button>
                    </div>
                  </div>
                </div>
              </form>
              <!-- Contact Form End -->

            </div>
          </div>
          <!-- Content Block - Contact Form End -->

          <!-- Content Block - Socials Cards Start -->
          <div class="content__block grid-block">
            <div class="socials-cards d-flex justify-content-start flex-wrap">
              <!-- socials item -->
              <div class="socials-cards__item d-flex grid-item-s animate-card-5">
                <div class="socials-cards__card">
                  <i class="ph-bold ph-dribbble-logo"></i>
                  <a class="socials-cards__link" href="https://dribbble.com/" target="_blank"></a>
                </div>
              </div>
              <!-- socials item -->
              <div class="socials-cards__item d-flex grid-item-s animate-card-5">
                <div class="socials-cards__card">
                  <i class="ph-bold ph-behance-logo"></i>
                  <a class="socials-cards__link" href="https://www.behance.net/" target="_blank"></a>
                </div>
              </div>
              <!-- socials item -->
              <div class="socials-cards__item d-flex grid-item-s animate-card-5">
                <div class="socials-cards__card">
                  <i class="ph-bold ph-instagram-logo"></i>
                  <a class="socials-cards__link" href="https://www.instagram.com/" target="_blank"></a>
                </div>
              </div>
              <!-- socials item -->
              <div class="socials-cards__item d-flex grid-item-s animate-card-5">
                <div class="socials-cards__card">
                  <i class="ph-bold ph-twitch-logo"></i>
                  <a class="socials-cards__link" href="https://www.twitch.tv/" target="_blank"></a>
                </div>
              </div>
              <!-- socials item -->
              <div class="socials-cards__item d-flex grid-item-s animate-card-5">
                <div class="socials-cards__card">
                  <i class="ph-bold ph-pinterest-logo"></i>
                  <a class="socials-cards__link" href="https://www.pinterest.com/" target="_blank"></a>
                </div>
              </div>
            </div>
          </div>
          <!-- Content Block - Socials Cards End -->

          <!-- Content Block - Teaser Start -->
          <div class="content__block">
            <div class="teaser">
              <p class="teaser__text animate-in-up">Want to know more about me, tell me 
                about your project or just to say hello? 
                <a class="text-link-bold" href="mailto:example@example.com?subject=Message%20from%20your%20site">Drop me a line</a> 
                and I'll get back 
                as soon as possible.
              </p>
            </div>
          </div>
          <!-- Content Block - Teaser End -->

          <!-- Content Block - Contact Data Start -->
          <div class="content__block">
            <div class="container-fluid p-0 contact-lines animate-in-up">
              <div class="row g-0 contact-lines__item">
                <!-- data item -->
                <div class="col-12 col-md-4 contact-lines__data">
                  <p class="contact-lines__title animate-in-up">Location</p>
                  <p class="contact-lines__text animate-in-up">
                    <a class="text-link-bold" href="https://maps.app.goo.gl/xMJXTEUeHkv6kYRQ6" target="_blank">Odesa, Ukraine</a>
                  </p>
                </div>
                <!-- data item -->
                <div class="col-12 col-md-4 contact-lines__data">
                  <p class="contact-lines__title animate-in-up">Phone</p>
                  <p class="contact-lines__text animate-in-up">
                    <a class="text-link-bold" href="tel:+12127089400">+1 212-708-9400</a>
                  </p>
                </div>
                <!-- data item -->
                <div class="col-12 col-md-4 contact-lines__data">
                  <p class="contact-lines__title animate-in-up">Email</p>
                  <p class="contact-lines__text animate-in-up">
                    <a class="text-link-bold" href="mailto:example@example.com?subject=Message%20from%20your%20site">hello@alexwalker.com</a>
                  </p>
                </div>
              </div>
            </div>
          </div>
          <!-- Content Block - Contact Data End -->

        </section>
        <!-- Contact Section End -->

      </div>
    </div>
    <!-- Page Content End -->

    <!-- Root element of PhotoSwipe. Must have class pswp. -->
    <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

      <!-- Background of PhotoSwipe.
      It's a separate element, as animating opacity is faster than rgba(). -->
      <div class="pswp__bg"></div>

      <!-- Slides wrapper with overflow:hidden. -->
      <div class="pswp__scroll-wrap">

        <!-- Container that holds slides. PhotoSwipe keeps only 3 slides in DOM to save memory. -->
        <!-- don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
          <div class="pswp__item"></div>
          <div class="pswp__item"></div>
          <div class="pswp__item"></div>
        </div>

        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">

          <div class="pswp__top-bar">

            <!--  Controls are self-explanatory. Order can be changed. -->

            <div class="pswp__counter"></div>

            <button class="pswp__button pswp__button--close link-s" title="Close (Esc)"></button>

            <button class="pswp__button pswp__button--share link-s" title="Share"></button>

            <button class="pswp__button pswp__button--fs link-s" title="Toggle fullscreen"></button>

            <button class="pswp__button pswp__button--zoom link-s" title="Zoom in/out"></button>

            <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
            <!-- element will get class pswp__preloader-active when preloader is running -->
            <div class="pswp__preloader">
              <div class="pswp__preloader__icn">
                <div class="pswp__preloader__cut">
                  <div class="pswp__preloader__donut"></div>
                </div>
              </div>
            </div>
          </div>

            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
              <div class="pswp__share-tooltip"></div>
            </div>

            <button class="pswp__button pswp__button--arrow--left link-s" title="Previous (arrow left)"></button>

            <button class="pswp__button pswp__button--arrow--right link-s" title="Next (arrow right)"></button>

            <div class="pswp__caption">
              <div class="pswp__caption__center"></div>
            </div>

        </div>

      </div>

    </div>

    <!-- Load Scripts Start -->
    <script src="js/libs.min.js"></script>
    <script>
      const content = document.querySelector('body');
      const imgLoad = imagesLoaded(content);
      imgLoad.on('done', instance => {
        setTimeout(() => {
          document.getElementById("svgBackground").classList.add("loaded");
        }, "1000");
      });
    </script>
    <script src="js/app.js"></script>
    <script src="js/gallery-init.js"></script>
    <!-- Load Scripts End -->
    
  

</body></html>